<template>
  <div class="ad-wrap">
    <G_header title="添加广告" />

    <van-swipe-cell v-for="(item,index) in adList" :key="index">
      <van-cell :border="false" :title="item.title" />
      <template slot="right">
        <van-button square type="danger" text="删除" @click="deleteAd(item)" />
      </template>
    </van-swipe-cell>

    <div class="footer fixed">
      <van-button type="info" size="large" @click="adshow = true">添加新广告</van-button>
    </div>
    <van-popup
      v-model="adshow"
      position="bottom"
      :style="{ height: '100%' }"
    >
     <div class="cross">
      <van-icon name="cross" @click="adshow = false" size="22px" />
    </div>
    <van-cell-group title="弹窗图片">
      <van-cell title="图片" style="line-height:60px">
        <div slot="right-icon">
           <van-uploader style="margin: 0 auto" v-model="fileList" :after-read="afterRead" :max-count="1" preview-size="60px" />
        </div>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
       <van-cell title="广告类型" :value="adTypeText" @click="show = true;" is-link />
      <van-cell title="商品" :value="goodsTitle" is-link @click="goodsShow = true;goodsList=[]" />
      <van-field v-model="form.name" placeholder="请输入广告名称" label="广告名称"/>
      <van-field v-model="form.remark" placeholder="请输入备注" label="备注" />
    </van-cell-group>
    <van-button type="primary" size="large" @click="create">提交</van-button>
      <van-popup
        v-model="show"
        closeable
        position="bottom"
      >
      <van-picker
        :columns="columns"
        :default-index="0"
        show-toolbar
        @cancel="show = false"
        @confirm="onConfirm"
      />
      </van-popup>
      <van-popup v-model="goodsShow" closeable position="bottom">
      <div class="cross">
        <van-icon name="cross" @click="goodsShow = false" size="22px" />
      </div>
      <van-cell-group>
        <div v-if="goodsList.length == 0">
          <div style="text-align:center"><van-loading type="spinner" v-if="goodsLoadingType">加载中...</van-loading> </div>
          <van-cell :title="item.title" is-link v-for="(item,index) in sortList" :key="index" @click="getGoods(item)" />
        </div>
        <div v-else>
          <van-cell :title="item.title" is-link v-for="(item,index) in goodsList" :key="index" @click="getGoodsid(item)"/>
        </div>
      </van-cell-group>
      </van-popup>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from 'vant';
import { Notify } from 'vant';
import { log } from 'util';
export default{

  name: 'Ad',
  data(){
    return {
      adshow: false,
      radio:0,
      show: false,
      goodsShow: false,
      form:{
        title:null,
          name:'',
          type: 'storeLayer',
          remark:'',
          image:'',
          goods_id:null
      },
      columns: ['商店首页弹窗'],
      fileList:[],
      storeInfo: null,
      adTypeText: '未选择',
      goodsTitle:'请选择商品',
      sortList:[],
      goodsList:[],
      goodsLoadingType:false,
      adList:[]
    }
  },
  created(){
    this.storeInfo = this.global.state.storeInfo;
    this.getlist();
    this.getAdList();
  },
  methods:{
    getAdList(){
      let params = {};
      params.token = sessionStorage.getItem("token");
      this.axios.get('/api/store/manager/ad/list/'+this.global.state.storeInfo.id,{params}).then(res=>{
        this.adList = res.data.data;
      }).catch(err=>{
        console.log(err)
      });
    },
    getlist(){
      this.axios.get('/api/store/manager/category/list/'+this.global.state.storeInfo.id,{
        token: sessionStorage.getItem("token") 
    }).then(res=>{
      this.sortList = res.data.data;
      }).catch(err=>{
        console.log(err)
      });
    },
    getGoods(e){
      this.goodsLoadingType = true;
      let params = {};
      params.page = 1;
      params.token = sessionStorage.getItem("token") ;
       this.axios.get('/api/store/manager/good/list/'+ e.id+ '/Normal')
        .then(res=>{
          this.goodsLoadingType = false;
          this.goodsList = res.data.data.data;
        })
        .catch(error=>{
          console.log(error)
        })
    },
    getGoodsid(e){
      this.goodsTitle = e.title;
      this.form.goods_id = e.id;
      this.goodsShow = false;
    },
    afterRead(file) {
      let params = new FormData();
      params.append('token',sessionStorage.getItem("token"))
      params.append('file',file.file)
      this.axios.post('/api/v1/file/upload',params).then(res=>{
        if(res.data.code == 200){
          this.image = res.data.data;
          Notify({ type: 'primary', message: res.data.message,background:'#07c160'});
        }
      }).catch(err=>{
        console.log(err);
      })
      // 此时可以自行将文件上传至服务器
    },
    onConfirm(value,index){
      this.show = false;
      this.adTypeText = this.columns[index];
    },
    deleteAd(item){
      let params = {};
      params.token = sessionStorage.getItem("token") ;
      this.axios.post('/api/store/manager/ad/delete/'+ item.id,params)
      .then(res=>{
        console.log(res);
        Notify({ type: 'primary', message: res.data.message,background:'#07c160',onClose:()=>{
          this.getAdList()
        }});
      })
      .catch(error=>{
        console.log(error)
      })
    },
    create(){
      let link = location.host +'/#/product/store/goods_id='+this.form.goods_id;
      let params = {};
      params.token = sessionStorage.getItem('token');
      params.title = this.form.name;
      params.type = this.form.type;
      params.image = this.image;
      params.remark = this.form.remark;
      params.link = link;
      console.log(params);
      this.axios.post('/api/store/manager/ad/create/'+this.storeInfo.id,params).then(res=>{
        Notify({ type: 'primary', message: res.data.message,background:'#07c160',onClose:()=>{
          this.adshow = false;
          this.getAdList()
        }});
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>
<style lang="less" scoped>
.ad-wrap {
  padding-bottom: 50px;
  .cross {
    padding: 10px;
    text-align: right
  }
  .footer {
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
